<!-- 选择想定弹窗 -->
<template>
    <div class="select-scenario-experiment-dialog">
        <el-dialog title="选择想定" :visible.sync="dialogVisible" append-to-body width="600px"
            :close-on-click-modal="false">
            <div class="select-scenario-experiment">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="选择想定" name="selectScenario">
                        <Tree ref="scenarioDataTreeRef" :isGeneralFolderAndFile="true" :showMenu="false"
                            @nodeClick="handleNodeClick" :treeData="scenarioDataList"></Tree>
                    </el-tab-pane>
                    <el-tab-pane label="选择试验" name="selectExperiment">
                        <Tree ref="experimentDataTreeRef" :isGeneralFolderAndFile="true" :showMenu="false"
                            @nodeClick="handleNodeClick" :treeData="scenarioDataList"></Tree>
                    </el-tab-pane>
                    <el-tab-pane label="选择试验(评估分析)" name="selectExperimentWithAnalysis">
                        <Tree ref="experimentWithAnalysisDataTreeRef" :isGeneralFolderAndFile="true" :showMenu="false"
                            @nodeClick="handleNodeClick" :treeData="scenarioDataList"></Tree>
                    </el-tab-pane>
                    <el-tab-pane label="本地上传" name="localUpload">
                        <el-upload class="upload-file" drag multiple :on-success="handleFileSuccess"
                            action="https://jsonplaceholder.typicode.com/posts/">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-tab-pane>
                </el-tabs>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button class="jtyj-btn-cancel" @click="dialogVisible = false">取 消</el-button>
                <el-button class="jtyj-btn-primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getScenarioTree } from "@/api/myspace/scenario-edit-tool/scenario-edit";
import Tree from "@/components/LeftTree/tree.vue";
export default {
    name: "SelectExperimentDialog",
    data() {
        return {
            dialogVisible: false,
            activeName: 'selectScenario',
            scenarioDataList: [],
            selectName: null, // 名称
            selectId: null, // id
            uploadPath: null, // 文件路径
            source: null, // 想定来源
        }
    },
    components: {
        Tree
    },
    created() {
        this.getScenarioTree();
    },
    methods: {
        getScenarioTree() {
            getScenarioTree().then((response) => {
                if (response.code === 200) {
                    this.scenarioDataList = response.data[0].commonTreeList;
                }
            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        handleFileSuccess(response, file, fileList) {
            console.log('response', response);
            console.log('file', file);
            console.log('fileList', fileList);
            this.uploadPath = file.name
            this.source = "localUpload"
        },

        // 当树节点被点击时
        handleNodeClick(data) {
            console.log(data);
            this.source = null
            this.selectId = null
            this.selectName = null
            if (data.type == 1) {
                this.source = this.activeName
                this.selectId = data.id
                this.selectName = data.name
            }
        },


        submit() {
            if (this.activeName != "localUpload" && this.selectId) {
                this.dialogVisible = false;
                this.$emit('change', this.source, this.selectId, this.selectName, '')
            } else if (this.activeName == "localUpload" && this.uploadPath) {
                this.dialogVisible = false;
                this.$emit('change', this.source, '', '', this.uploadPath)
            }else{
                this.$message.error("请再进行在线选择或者本地上传操作后再次点击确定");
            }
        }
    },
    mounted() {

    }
}
</script>

<style lang="scss" scoped>
.select-scenario-experiment-dialog {
    .select-scenario-experiment {
        width: 550px;
        height: 600px;

        .upload-file {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }
}
</style>